import React from 'react';
import '../App.css';
import PropTypes from 'prop-types'

class Counter extends React.Component {
    // constructor(props) {
    //     super(props);
        // this.onCounterSub = this.props.onCounterSub;
        // this.onCounterAdd = this.props.onCounterAdd;
    // }
    render() {
        const {count, onCounterAdd, onCounterSub} = this.props;
        return (

                <div className="divWrap">
                <div><hr /></div>
                    <header>
                        <div className="Couner-intro">Counter</div>
                    </header>
                    <div>
                        <input className="Couner-show" disabled value={count}/>
                    </div>
                    <div>
                        <button className="Couner-button" onClick={onCounterAdd}>+</button>
                        <button className="Couner-button" onClick={onCounterSub}>-</button>
                    </div>
                </div>
            )
    }
}

Counter.propTypes = {
    count:PropTypes.number.isRequired,
    onCounterAdd : PropTypes.func.isRequired,
    onCounterSub : PropTypes.func.isRequired
}

export default Counter